<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="../../../iconfont/iconfont.css">
</head>
<body>

<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">搜索</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="daui-headline daui-headline_left">
	<div class="daui-headline__text-area">
    	<h2 class="daui-headline__title">搜索 Search</h2>
    	<p class="daui-headline__desc">搜索</p>
	</div>
</div>

<div>
	<div class="daui-cells__title">原weui风格</div>
	<div class="weui-search-bar" id="searchBar">
		<form class="weui-search-bar__form" action="#">
			<div class="weui-search-bar__box">
				<i class="weui-icon-search"></i>
				<input class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="" type="search" />
				<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
			</div>
			<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
				<i class="weui-icon-search"></i>
				<span>搜索</span>
			</label>
		</form>
		<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
	</div>

	<div class="daui-cells__title">原weui风格扩展样式</div>
	<div class="weui-search-bar">
		<input type="search" class="daui-search-input" id="search" placeholder="关键字"><button class="weui-btn weui-btn_mini weui-btn_primary"><i class="iconfontzz icon-sousuo"></i></button>
	</div>

	<div class="weui-cells__title">基础功能</div>
	<div class="daui-searchbar">
		<div class="daui-searchbar__forum-area">
			<div class="daui-searchbar__hd">
				<span class="iconfontzz icon-search"></span>
			</div>
			<div class="daui-searchbar__bd">
				<input type="search" class="daui-searchbar_input" id="search" placeholder="请输入关键字" />
			</div>
		</div>
	</div>
	
	<div class="weui-cells__title">搜索框形状</div>
	<div class="daui-searchbar daui-searchbar_square">
		<div class="daui-searchbar__forum-area">
			<div class="daui-searchbar__hd">
				<span class="iconfontzz icon-search"></span>
			</div>
			<div class="daui-searchbar__bd">
				<input type="search" class="daui-searchbar_input" id="search" placeholder="请输入关键字" />
			</div>
		</div>
	</div>

	<div class="weui-cells__title">搜索框按钮</div>
	<div class="daui-searchbar">
		<div class="daui-searchbar__forum-area">
			<div class="daui-searchbar__hd">
				<span class="iconfontzz icon-search"></span>
			</div>
			<div class="daui-searchbar__bd">
				<input type="search" class="daui-searchbar_input" id="search" placeholder="请输入关键字" />
			</div>
		</div>
		<div class="daui-searchbar__btn-area">
			<button class="weui-btn daui-btn_success daui-round shadow">搜索</button>
		</div>
	</div>

	<div class="weui-cells__title">背景灰色</div>
	<div class="daui-searchbar daui-searchbar_styletwo">
		<div class="daui-searchbar__forum-area">
			<div class="daui-searchbar__hd">
				<span class="iconfontzz icon-search"></span>
			</div>
			<div class="daui-searchbar__bd">
				<input type="search" class="daui-searchbar_input" id="search" placeholder="请输入关键字" />
			</div>
		</div>
		<div class="daui-searchbar__btn-area">
			<button class="weui-btn daui-btn_success daui-round shadow">搜索</button>
		</div>
	</div>

	<div class="weui-cells__title">背景灰色直角</div>
	<div class="daui-searchbar daui-searchbar_stylethree">
		<div class="daui-searchbar__forum-area">
			<div class="daui-searchbar__bd">
				<input type="search" class="daui-searchbar_input" id="search" placeholder="请输入关键字" />
			</div>
		</div>
		<div class="daui-searchbar__btn-area">
			<button class="weui-btn daui-btn_success shadow">
				<span class="iconfontzz icon-search"></span>
			</button>
		</div>
	</div>

	<div class="daui-gap bg-white"></div>
</div>

<script src="../../js/jquery.min.js"></script>
<script>
;(function($) {
    "use strict";

    $(document).on("click touchstart", ".weui-search-bar__label", function(e) {
        $(e.target).parents(".weui-search-bar").addClass("weui-search-bar_focusing").find('input').focus();
    })

	    .on("click", ".weui-search-bar__cancel-btn", function(e) {
	        var $input = $(e.target).parents(".weui-search-bar").removeClass("weui-search-bar_focusing").find(".weui-search-bar__input").val("").blur();
	    })
	    .on("click", ".weui-icon-clear", function(e) {
	        var $input = $(e.target).parents(".weui-search-bar").find(".weui-search-bar__input").val("").focus();
	    });

})($);
</script>
</body>
</html>